<template>
    <el-container>
        <el-header style="margin-bottom: 60px;">
            <h2>新增用户</h2>
        </el-header>
            <div style="margin-top: -20px;">
                <el-form :model="forms" label-width="auto" style="width: 500px;margin: auto;">
                    <el-form-item label="用户昵称">
                        <el-input v-model="forms.nickname" aria-required="true" />
                    </el-form-item>
                    <el-form-item label="真实姓名">
                        <el-input v-model="forms.real_name" />
                    </el-form-item>
                    <el-form-item label="用户ID">
                        <el-input v-model="forms.user_id" />
                    </el-form-item>
                    <el-form-item label="手机号">
                        <el-input v-model="forms.phone" />
                    </el-form-item>
                    <el-form-item label="性别">
                        <el-input v-model="forms.gender" />
                    </el-form-item>
                    <!-- <el-form-item label="角色">
                        <el-select  v-model="forms.roleid" placeholder="请选择">
                        <el-option v-for="item in role_list " :key="item.id" :label="item.name" :value="item.id" />
                        </el-select>
                    </el-form-item> -->
                    <el-form-item label="注册时间">
                        <el-input v-model="forms.birth_date" />
                    </el-form-item>
                    <el-form-item label="地址">
                        <el-input v-model="forms.address" />
                    </el-form-item>
                    <el-form-item label="头像">
                        <input type="file" accept="image/png, image/jpeg" @change="imageChange" />
                    </el-form-item>
                    <el-form-item label="身高">
                        <el-input v-model="forms.height" />
                    </el-form-item>
                    <el-form-item label="体重">
                        <el-input v-model="forms.weight" />
                    </el-form-item>
                    <el-form-item label="职业">
                        <el-input v-model="forms.occupation" />
                    </el-form-item>
                    <el-form-item  #default="scope">
                        <el-button @click="postuser(scope.row)" type="success">保存</el-button>
                    </el-form-item>
                </el-form>
            </div>
    </el-container>

</template>

<script setup>
import { ref } from 'vue'
import axios from 'axios'
import { onMounted } from 'vue';
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'
import http from "../../http";  
const router = useRouter()

let forms = ref({
  nickname: '',
  user_id: '',
  real_name: '',
  gender: '',
  phone: '',
  birth_date:'',
  avatar: '',
  address:"",
  height:"",
  weight:"",
  occupation:""

})
const imageChange=(e)=>{
    // console.log(e)
    forms.value.avatar= e.target.files[0];
}
const postuser = () => {
  console.log(forms.value)
  http.post(`/app/user/`,forms.value,{headers:{'Content-Type':'multipart/form-data'}})
  .then(res=>{
    console.log(res)
    if (res.status==201){
        ElMessage.success('添加成功')
        router.push('/userlist')
    }
  })
}
</script>

<style scoped>
.el-input {
    width: 300px;
    height: 30px;
}
label[required]::after {
  content: '*';
  color: red;
  margin-left: 5px;
}
</style>